<template>
    <div class="divBox">
        <el-card class="box-card" shadow="never" v-loading="loading">
         <h3>流量包列表</h3>   
        <div v-if="list.length>0" class="listcode">
            <div v-for="(item,index) in list" :key="index" @click="addtianjia(item,index)" :class="active==index ? 'xuanzong' : ''" class="list-item">
                <div><label>流量包名称：</label>{{item.title}}</div>
                <div><label>流量包售价：</label>{{item.price}} 元</div>
                <div><label>总流量：</label>{{item.flux}} GB</div>
            </div>
        </div>
        <div v-else style="text-align:center">
            暂无流量包信息
        </div>
        <div v-if="saleList" class="saleList-bottom">
        <h3>购买信息</h3>
            <div style="margin-top:20px">
              <label>流量包名称：</label>
              {{saleList.title}}
            </div>
            <div>
                <label>流量包售价：</label>
                {{saleList.price}} 元
            </div>
            <div>
                <label>购买数量：</label>
            <el-input-number
            style="width: 200px"
            v-model="saleList.number"
            :min="1"
          ></el-input-number>
            </div>
            <div>
                <label>售价总价：</label>
                {{Number(saleList.price)*Number(saleList.number)}} 元
            </div>
            <div align="right">
                <el-button @click="quxiao">取消</el-button>
                <el-button @click="tijiaoflow" type="primary">提交订单</el-button>
            </div>
        </div>
        </el-card>
        <el-dialog title="请使用微信扫码支付" :close-on-click-modal="false" :visible.sync="dialogVisible3" @close="quxiaofuzhi" width="350px" class="fanganid">
      <div id="qrCode" ref="qrCodeDiv"></div>
    </el-dialog>
    </div>
</template>
<script>
import {getPackedList,getPackCreate,getFluxPacket} from "@/api/flow.js"
import QRCode from "qrcodejs2";
export default {
    data(){
        return{
            list:[],
            loading:false,
            saleList:null,//销售流量包
            active:null,
            dialogVisible3:false,
            codeUrl:'',
            orderId:'',
            zhicode:null,
        }
    },
    created(){
       this.getlist()
    },
    methods:{
        zhifuzhuang(){
            this.zhicode=setInterval(()=>{
              getFluxPacket(this.orderId).then(res=>{
                  console.log('res111',res)
                  if(res.status=='已支付'){
                      this.$message({
                message: "支付成功",
                type: "success",
                duration: 2000,
              });
              this.dialogVisible3=false
              clearInterval(this.zhicode)
              this.$router.push({path:'/flow/list'})
                  }
              })
            },3000)
        },
        quxiaofuzhi(){
             this.$confirm('订单支付未完成，确定取消支付', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log('11')
          this.dialogVisible3=false
          clearInterval(this.zhicode)
          console.log('11',this.dialogVisible3)
          this.$router.push({path:'/flow/list'})
        }).catch(()=>{
            this.dialogVisible3=true
        })
        },
        //二维码
      bindQRCode: function() {
        document.getElementById("qrCode").innerHTML = "";
        new QRCode(this.$refs.qrCodeDiv, {
          text: this.codeUrl,
          width: 300,
          height: 300,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
        });
      },
        quxiao(){
            this.saleList=null
            this.active=null
        },
        //添加
        addtianjia(row,index){
            this.active=index
           this.saleList=row 
           this.$set(this.saleList,'number',1)
        },
        //提交订单
        tijiaoflow(){
            this.loading=true
            let parmas={
                id:this.saleList.id,
                number:this.saleList.number
            }
            getPackCreate(parmas).then(res=>{
                this.loading=false
                console.log('res',res)
                this.codeUrl = res.payinfo;
                this.dialogVisible3=true
                this.orderId=res.orderId
                this.$nextTick(function() {
                  this.bindQRCode();
                });
                setTimeout(()=>{
                    this.zhifuzhuang()
                },3000)
            }).catch(error=>{
                 this.loading=false
            })
        },
        getlist(){
            this.loading=true
            getPackedList({}).then(res=>{
             this.loading=false
             console.log('res',res)
             this.list=res
            }).catch(error=>{
              this.loading=false
            })
        },
    },
}
</script>
<style lang="scss" scoped>
h3{
    padding: 10px 0;
    color: #1890ff;
}
    .listcode{
        text-align: -webkit-auto;
        .list-item{
        background-color: #f1f1f1;
        padding: 20px;
        width: 24%;
        border-radius: 10px;
        cursor: pointer;
        margin-left:10px;
        margin-bottom: 10px;
        display:inline-block;
        div~div{
            margin-top: 20px;
        }
    }
    .xuanzong{
        background-color: #1890ff;
        color: #fff;
    }
    }
    .saleList-bottom{
        margin-top: 20px;
        div~div{
            margin-top: 20px;
        }
    }
    label{
        width: 150px;
    }
</style>
<style lang="scss">
    .divBox{
      .fanganid{
          img{
              margin: auto;
          }
      }
    }
</style>